<?php ?>
<!DOCTYPE html>
<head>
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link href="<?php echo base_url('css/weather.css'); ?>" type="text/css" rel="stylesheet">
    <script src="<?php echo base_url('js/weather.js'); ?>" type="text/javascript"></script>
    <script src="<?php echo base_url('js/prefixfree-1.0.7.js'); ?>" type="text/javascript"></script>
    <script src="http://libs.useso.com/js/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="header">

    </div>
    <div class="content">
        <div class="con_left float_l clearfix">
            <center class="bg_clear">
                <div id="clock1" class="bg_clear"></div>
                <div id="clock2" class="bg_clear"></div>
                <div id="clock3" class="bg_clear"></div>
            </center>
            <iframe allowtransparency="true" frameborder="0" width="100%" height="98" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=2&bd=0&k=000000&f=&q=1&e=1&a=1&c=54511&w=410&h=98&align=center"></iframe>
            <div class="qqzone float_l">
                <div class="h_30">
                    <span class="h_30 font_size20 line_h_30 float_l">QQ空间访客数&nbsp&nbsp</span>
                    <span class="font_size15 h_20 float_l margin_t_10">1080&nbsp&nbsp&nbsp</span>
                    <span class="font_size10 float_l">+1</span>
                </div>

                <div class="w_100_100 h_30 line_h_30 margin_t_10">
                    <p class="font_size20">最近访客</p>
                    <ul>
                        <li>李浩</li>
                        <li>李浩</li>
                        <li>李浩</li>
                        <li>李浩</li>
                    </ul>
                </div>
            </div>
        </div>
<!--        <div class="con_right float_r">-->
<!---->
<!--        </div>-->


        <div class="con_center">
            <table style="display: none" width="100%" height="100%" topmargin="0" leftmargin="0">
                <tr>
                    <td align="absmiddle">
                        <h1 class="font_size70 font_weight">QQ空间访客数，空间访客数</h1>
                    </td>
                </tr>
            </table>

<!--            <div class="htmleaf-content bgcolor-8">-->
                <!-- a simple grid and an animate button -->
                <div class="grid"></div>
<!--            </div>-->
        </div>
    </div>
    <div class="footer">
    </div>
</body>

<script>
    weather.wea();
    weather.clock();
//    weather.animageImg();
</script>

<!-- jQuery easing plugin -->
<script type="text/javascript">
    //Creating 50 thumbnails inside .grid
    //the images are stored on the server serially. So we can use a loop to generate the HTML.
    var images = "", count = 50;
    for(var i = 1; i <= count; i++)
        images += '<img class="grid-image" src="img/'+i+'.jpg" />';

    //appending the images to .grid
    $(".grid").append(images);
    var d = 0; //delay
    var ry, tz, s; //transform params
    function showLogin()
    {
        $("img.grid-image").each(function(){
            d = Math.random()*1000; //1ms to 1000ms delay
            $(this).delay(d).animate({opacity: 0}, {
                //while the thumbnails are fading out, we will use the step function to apply some transforms. variable n will give the current opacity in the animation.
                step: function(n){
                    s = 1-n; //scale - will animate from 0 to 1
                    $(this).css("transform", "scale("+s+")");
                },
                duration: 1000,
            })
        }).promise().done(function(){
            //after *promising* and *doing* the fadeout animation we will bring the images back
            storm();
        })
    }
    setInterval("showLogin()","10000");
    //bringing back the images with style
    function storm()
    {
        $("img.grid-image").each(function(){
            d = Math.random()*1000;
            $(this).delay(d).animate({opacity: 1}, {
                step: function(n){
                    //rotating the images on the Y axis from 360deg to 0deg
                    ry = (1-n)*360;
                    //translating the images from 1000px to 0px
                    tz = (1-n)*1000;
                    //applying the transformation
                    $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)");
                },
                duration: 3000,
                //some easing fun. Comes from the jquery easing plugin.
                easing: 'easeOutQuint',
            })
        })
    }
</script>
</html>